<template>
  <el-card
    v-loading="loading"
    style="overflow-y: auto"
    class="max-view-height maxx-view-height"
  >
    <el-row>
      <abstract-table
        ref="table"
        :data="list"
        :height="tableMaxHeight"
        :row-style="{ height: '56px' }"
        @cell-click="cellClick"
      >
        <el-table-column
          align="left"
          label="配置项"
          prop="title"
          show-overflow-tooltip
        />
        <el-table-column align="left" label="值" prop="value">
          <template v-slot:header>
            <v-icon icon="el-icon-edit-outline" style="margin-right: 0.2em" />值
          </template>
          <template v-slot="{ row }">
            <span v-if="row.readonly">
              {{ row.value }}
            </span>
            <template v-else>
              <el-date-picker
                v-if="row.key == 'dateOfFirstSubmissionOfWorkSum'"
                v-model="row.value"
                type="date"
                size="small"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @blur="saveValue(row)"
              >
              </el-date-picker>
              <el-select
                v-else-if="row.key == 'assessmentIntervalDurationUnit'"
                v-model="row.value"
                placeholder="请选择"
                size="small"
                @change="saveValueForSelect(row, $event)"
              >
                <el-option value="月"></el-option>
                <el-option value="天"></el-option>
              </el-select>
              <el-input
                v-else
                v-model="row.value"
                size="small"
                @blur="saveValue(row)"
              ></el-input>
            </template>
          </template>
        </el-table-column>
      </abstract-table>
    </el-row>
  </el-card>
</template>

<script>
import AbstractTable from '@/components/abstract/Table'
import autoAdaptHeightMixin from '@/views/_common/ListPage/autoAdaptHeightMixin'

import { request } from '@/api/request'

export default {
  name: 'WorkSumConfig',

  components: {
    AbstractTable
  },

  mixins: [autoAdaptHeightMixin],

  data() {
    return {
      loading: false,
      list: []
    }
  },

  mounted() {
    this.getIndexData()
  },

  methods: {
    cellClick(row, column, cell) {
      if (!row.readonly || column.property != 'value') return
      row.readonly = false
      this.$nextTick(() => {
        let inputs = cell.getElementsByClassName('el-input__inner')
        for (let input of inputs) {
          input.focus()
          break
        }
      })
    },

    cancel(li) {
      li.readonly = true
      li.value = li.oldValue
    },

    saveValueForSelect(row) {
      this.saveValue(row)
    },

    saveValue(row) {
      const { id, value, oldValue } = row
      if (value === oldValue) return (row.readonly = true)
      request(
        'company/workSum/config/modifyValue',
        {
          id,
          value
        },
        () => {
          row.readonly = true
          this.$message.success('保存成功')
          this.getIndexData()
        }
      )
    },

    getIndexData() {
      this.loading = true
      request('company/workSum/config/index', {}, (res) => {
        res.data.password = ''
        res.data._list.forEach((e) => {
          e.oldValue = e.value
          e.readonly = true
        })
        this.list = res.data._list
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" src="./style.scss" scoped></style>
